<script setup lang="ts">
import { ref, computed } from 'vue';
import type { Photo } from '../types';
import PhotoStack from './PhotoStack.vue';

const props = defineProps<{
  photos: Photo[];
}>();

const selectedPhotos = ref<Set<number>>(new Set());

const toggleSelection = (photo: Photo) => {
  if (selectedPhotos.value.has(photo.id)) {
    selectedPhotos.value.delete(photo.id);
  } else {
    selectedPhotos.value.add(photo.id);
  }
};

const selectedPhotosList = computed(() => {
  return props.photos.filter(photo => selectedPhotos.value.has(photo.id));
});
</script>

<template>
  <div class="selection-container">
    <div v-if="selectedPhotosList.length > 0" class="selected-preview mb-8">
      <PhotoStack :photos="selectedPhotosList" :maxDisplay="3" />
      <p class="text-center mt-4 text-gray-400">
        {{ selectedPhotosList.length }} photos selected
      </p>
    </div>
    
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      <div
        v-for="photo in photos"
        :key="photo.id"
        class="relative aspect-[3/2] cursor-pointer group"
        @click="toggleSelection(photo)"
      >
        <img
          :src="photo.url"
          :alt="photo.title"
          class="w-full h-full object-cover rounded-lg transition-transform duration-300"
          :class="{
            'ring-2 ring-white ring-offset-2 ring-offset-black': selectedPhotos.has(photo.id)
          }"
        />
        <div
          class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"
        >
          <div class="absolute top-2 right-2">
            <div
              class="w-6 h-6 rounded-full border-2 border-white flex items-center justify-center"
              :class="{
                'bg-white': selectedPhotos.has(photo.id)
              }"
            >
              <svg
                v-if="selectedPhotos.has(photo.id)"
                class="w-4 h-4 text-black"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M5 13l4 4L19 7"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.selection-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.selected-preview {
  max-width: 400px;
  margin: 0 auto;
}
</style>